<template>
  <div class="app-container">
    <!-- 高德地图选点器演示 -->
    <el-card class="demo-card">
      <template #header>
        <div class="card-header">
          <span>高德地图选点器演示</span>
          <el-space>
            <el-button @click="showDebug = true">API调试</el-button>
            <el-button type="primary" @click="showDialog = true">
              在弹窗中使用
            </el-button>
          </el-space>
        </div>
      </template>
      
      <!-- 基础使用 -->
      <div class="demo-section">
        <h3>地址搜索选择器</h3>
        <p class="demo-desc">搜索地址，选择后获取经纬度坐标</p>
        <AmapPicker
          v-model="selectedLocation"
          :center="[116.397428, 39.90923]"
          :zoom="13"
          city="全国"
          height="400px"
          @change="handleLocationChange"
          @confirm="handleLocationConfirm"
        />
      </div>

      <!-- 结果展示 -->
      <div v-if="selectedLocation" class="demo-section">
        <h3>选择结果</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="经度">
            {{ selectedLocation.lng.toFixed(6) }}
          </el-descriptions-item>
          <el-descriptions-item label="纬度">
            {{ selectedLocation.lat.toFixed(6) }}
          </el-descriptions-item>
          <el-descriptions-item label="地址" :span="2">
            {{ locationInfo.address || '获取中...' }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 操作按钮 -->
      <div class="demo-section">
        <h3>快速测试</h3>
        <p class="demo-desc">点击按钮快速测试不同地址的搜索效果</p>
        <el-space wrap>
          <el-button @click="searchLocation('北京天安门')">
            搜索：北京天安门
          </el-button>
          <el-button @click="searchLocation('上海外滩')">
            搜索：上海外滩
          </el-button>
          <el-button @click="searchLocation('广州塔')">
            搜索：广州塔
          </el-button>
          <el-button @click="clearLocation">
            清除选择
          </el-button>
        </el-space>
      </div>
    </el-card>

    <!-- 其他功能演示 -->
    <el-card class="demo-card" style="margin-top: 20px;">
      <template #header>
        <span>其他功能演示</span>
      </template>
      
      <el-collapse v-model="activeCollapse">
        <el-collapse-item title="文件上传组件" name="fileUpload">
          <FileUpload></FileUpload>
        </el-collapse-item>
        
      </el-collapse>
    </el-card>

    <!-- 弹窗演示 -->
    <el-dialog
      v-model="showDialog"
      title="在弹窗中使用地图选点器"
      width="80%"
      :before-close="handleDialogClose"
    >
      <AmapPicker
        v-model="dialogLocation"
        :center="[121.473701, 31.230416]"
        :zoom="12"
        city="上海"
        height="500px"
        ref="dialogMapRef"
        @confirm="handleDialogConfirm"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmDialogSelection">
            确定选择
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- API调试弹窗 -->
    <el-dialog
      v-model="showDebug"
      title="高德地图API调试工具"
      width="90%"
      :before-close="handleDebugClose"
    >
      <AmapDebug />
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia';
import useUserStore from '@/store/modules/user';
import FileUpload from '@/components/FileUpload/index.vue';
import AmapPicker from '@/components/AmapPicker/index.vue';
import AmapDebug from '@/components/AmapPicker/debug.vue';

// 用户状态
const userStore = useUserStore();
const { id } = storeToRefs(userStore);

// 地图选点器相关数据
const selectedLocation = ref(null);
const locationInfo = ref({});

// 弹窗演示数据
const showDialog = ref(false);
const dialogLocation = ref(null);
const dialogMapRef = ref(null);

// 调试弹窗
const showDebug = ref(false);

// 折叠面板
const activeCollapse = ref(['fileUpload']);



// 处理位置变化
function handleLocationChange(data) {
  console.log('位置变化:', data);
  if (data) {
    locationInfo.value = data;
  } else {
    locationInfo.value = {};
  }
}

// 处理位置确认
function handleLocationConfirm(data) {
  console.log('位置确认:', data);
  ElMessage.success(`已确认选择位置: ${data.address || '未知地址'}`);
}

// 搜索指定地址
function searchLocation(address) {
  // 这里可以通过ref调用组件的搜索方法
  ElMessage.info(`请在搜索框中输入"${address}"进行测试`);
}

// 清除位置
function clearLocation() {
  selectedLocation.value = null;
  locationInfo.value = {};
  ElMessage.info('已清除位置选择');
}

// 处理弹窗关闭
function handleDialogClose() {
  showDialog.value = false;
  dialogLocation.value = null;
}

// 处理弹窗中的位置确认
function handleDialogConfirm(data) {
  console.log('弹窗位置确认:', data);
}

// 确认弹窗选择
function confirmDialogSelection() {
  if (!dialogLocation.value) {
    ElMessage.warning('请先选择一个位置');
    return;
  }
  
  ElMessage.success('弹窗位置选择成功');
  showDialog.value = false;
  
  // 可以将弹窗选择的位置设置到主界面
  selectedLocation.value = dialogLocation.value;
}

// 处理调试弹窗关闭
function handleDebugClose() {
  showDebug.value = false;
}

</script>

<style scoped lang="scss">
.app-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.demo-card {
  margin-bottom: 20px;
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
  }
}

.demo-section {
  margin-bottom: 30px;
  
  h3 {
    margin: 0 0 10px 0;
    color: #303133;
    font-size: 18px;
    font-weight: 600;
  }
  
  .demo-desc {
    margin: 0 0 20px 0;
    color: #606266;
    font-size: 14px;
    line-height: 1.5;
  }
}


.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .app-container {
    padding: 10px;
  }
  
  .demo-card {
    .card-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }
  }
  
  .demo-section {
    h3 {
      font-size: 16px;
    }
  }
  
  .dialog-footer {
    flex-direction: column;
    
    .el-button {
      width: 100%;
    }
  }
}

/* Element Plus 组件样式调整 */
:deep(.el-descriptions__body) {
  background: #fafafa;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
  color: #606266;
}

:deep(.el-descriptions__content) {
  color: #303133;
}

:deep(.el-collapse-item__header) {
  font-weight: 600;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

/* 卡片阴影效果 */
.demo-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #ebeef5;
  transition: box-shadow 0.3s ease;
  
  &:hover {
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
  }
}
</style>
